<template>
  <div class="home-root">
    <flow-chart :real-time-data="realTimeData" :add-point-mode="true" :line-data="lineData" :point-data="pointData"
                :image-list="imageList"></flow-chart>
  </div>
</template>

<script setup>
import FlowChart from '@/components/FlowChart'
// 水泵
import waterPump from '@/assets/images/map/waterPump.png'
// 村庄
import village from '@/assets/images/map/village.png'
// 监测设备
import monitoringEquipment from '@/assets/images/map/monitoringEquipment.png'
// 流量计
import flowmeter from '@/assets/images/map/flowmeter.png'
import flowmeterDisabled from '@/assets/images/map/flowmeterDisabled.png'

import pointData from '@/datas/pointData1.json'
import lineData from '@/datas/lineData.json'
import {ref} from "vue";
import direction from "@/assets/images/map/direction.png";

const imageList = ref([
  {
    imageId: 'flowmeterDisabled',
    imageUrl: flowmeterDisabled
  },
  {
    imageId: 'direction',
    imageUrl: direction
  },
  {
    imageId: 'waterPump',
    imageUrl: waterPump
  },
  {
    imageId: 'village',
    imageUrl: village
  },
  {
    imageId: 'monitoringEquipment',
    imageUrl: monitoringEquipment
  },
  {
    imageId: 'flowmeter',
    imageUrl: flowmeter
  }
])

const realTimeData = ref([])

const changeRealTimeData = () => {
  realTimeData.value = Array.from(Array(16)).map((item, index) => {
    return {
      pointId: `${index + 1}`,
      realTime: Math.floor(Math.random() * 100),
      cumulative: Math.floor(Math.random() * 1000),
    }
  })
}

setInterval(() => {
  changeRealTimeData()
}, 1000)
</script>

<style scoped lang="scss">
.home-root {
  width: 100%;
  height: 100%;
}
</style>
